<template>
  <view>
    <!--  多选  -->
    <template v-if="selectType == 'multiple'">
      <u-checkbox-group
        v-model="listChecked"
      >
        <u-index-list
          :index-list="curSortBrandObj.indexList"
        >
          <template v-for="(item, index) in curSortBrandObj.itemArr">
            <!-- #ifdef APP-NVUE -->
            <u-index-anchor :key="index" bg-color="#fff" :text="curSortBrandObj.indexList[index]" />
            <!-- #endif -->
            <u-index-item :key="index">
              <!-- #ifndef APP-NVUE -->
              <u-index-anchor bg-color="#fff" :text="curSortBrandObj.indexList[index]" />
              <!-- #endif -->
              <view v-for="(cellItem, cellIndex) in item" :key="cellIndex" class="list-cell">
                <u-checkbox
                  :key="cellItem[itemId]"
                  class="checked-box"
                  shape="circle"
                  active-color="#ff5533"
                  size="16"
                  :label="cellItem[labelField ? labelField : classificationField]"
                  :name="cellItem[itemId]"
                />
              </view>
            </u-index-item>
          </template>
        </u-index-list>
      </u-checkbox-group>
      <view class="btn-box">
        <button class="btn btn-boundless" :plain="false" @click="cancelPopFn">取消</button>
        <button class="btn confirm-btn btn-noborder" :plain="true" @click="confirmSelectFn">{{ `确认已选${listChecked.length}个` }}</button>
      </view>
    </template>
    <!--  单选  -->
    <template v-if="selectType == 'single'">
      <u-index-list
        :index-list="curSortBrandObj.indexList"
      >
        <template v-for="(item, index) in curSortBrandObj.itemArr">
          <!-- #ifdef APP-NVUE -->
          <u-index-anchor :key="index" bg-color="#fff" :text="curSortBrandObj.indexList[index]" />
          <!-- #endif -->
          <u-index-item :key="index">
            <!-- #ifndef APP-NVUE -->
            <u-index-anchor bg-color="#fff" :text="curSortBrandObj.indexList[index]" />
            <!-- #endif -->
            <view v-for="(cellItem, cellIndex) in item" :key="cellIndex" class="list-cell">
              <view
                :key="cellIndex"
                @click="confirmSelectFn(cellItem)"
              >
                {{ cellItem[labelField ? labelField : classificationField] }}
              </view>
            </view>
          </u-index-item>
        </template>
      </u-index-list>
      <view class="btn-box">
        <button class="btn btn-boundless single-btn" :plain="false" @click="cancelPopFn">取消</button>
      </view>
    </template>
  </view>
</template>

<script>
import { dataLetterSort } from '@/common/dataLetterSort'
export default {
  name: 'Index',
  props: {
    sortBrandList: {
      type: Array,
      default: null
    },
    selectType: {
      type: String,
      default: 'multiple', // single-单选 multiple-多选
    },
    selectFn: {
      type: Function,
      default: null
    },
    classificationField: {
      type: String,
      default: 'name'
    },
    labelField: {
      type: String,
      default: 'name'
    },
    itemId: {
      type: String,
      default: ''
    },
    checkedIds: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      listChecked: [],
    }
  },
  computed: {
    curSortBrandObj() {
      const sortBrandObj = {
        indexList: [],
        itemArr: [],
      }
      const sortBrandList = dataLetterSort(this.sortBrandList, this.classificationField)
      sortBrandList.forEach((item) => {
        sortBrandObj.indexList.push(item.letter)
        sortBrandObj.itemArr.push(item.data)
      })
      return sortBrandObj
    },
    curCheckedIds() {
      return this.checkedIds
    }
  },
  mounted() {
    this.listChecked = this.curCheckedIds
  },
  methods: {
    confirmSelectFn(val) {
      const selectData = []
      if (this.selectType == 'single') {
        selectData.push(val)
        this.listChecked = [val[this.itemId]]
      } else {
        for (let i = 0; i < this.listChecked.length; i++) {
          for (let j = 0; j < this.sortBrandList.length; j++) {
            if (this.listChecked[i] == this.sortBrandList[j][this.itemId]) {
              selectData.push(this.sortBrandList[j])
            }
          }
        }
      }
      this.$emit('confirmSelectFn', this.selectFn, this.listChecked, selectData)
      this.$emit('cancelFn')
    },
    cancelPopFn() {
      this.listChecked = []
      this.$emit('cancelFn')
    }
  }
}
</script>

<style lang="scss" scoped>
.list-cell {
  display: flex;
  box-sizing: border-box;
  padding: 10px 24rpx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
  width: 80%;
  .checked-box{
    width: 32rpx;
    height: 32rpx;
  }
}
.btn-box{
  width: calc(100% - 50rpx);
  height: 80rpx;
  position: fixed;
  bottom: 40rpx;
  padding-left: 50rpx;
  z-index: 2;
  .btn{
    width: 180rpx;
    height: 68rpx;
    line-height: 68rpx;
    font-size: 32rpx;
    margin: 6rpx 32rpx 0 0;
    float: left;
  }
  .single-btn{
    width: 580rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size: $uni-font-size-base;
    border: 0;
  }
  .confirm-btn{
    width: 360rpx;
    color: $uni-bg-color;
    background: $uni-orange;
  }
}
:v-deep .u-index-anchor{
  font-weight: bold!important;
}
/deep/ .u-checkbox__icon-wrap{
  width: 32rpx!important;
  height: 32rpx!important;
}

</style>
